<template>
  <div>
    <nav-bar title="意见反馈" />
    <main>
      <div class="mg">简介</div>
      <van-field
        class="bg mg br"
        v-model="desc"
        type="textarea"
        maxlength="100"
        show-word-limit
        placeholder="请描述你的问题"
      />
      <van-uploader class="br" />
      <div class="tip mg">最多6张，单个图片不超过20M</div>
      <div class="mg">联系方式</div>
      <van-field
        class="bg mg br"
        v-model="tel"
        placeholder="请输入手机号码便于联系(非必填)"
      />
      <van-button
        class="submit-btn"
        color="linear-gradient(-45deg, #ff6034, #ee0a24)"
      >
        提交反馈
      </van-button>
    </main>
  </div>
</template>

<script>
export default {
  name: 'FeedbackPage',
  data() {
    return {
      desc: '',
      tel: '',
    };
  },
}
</script>

<style lang="less" scoped>
main {
  padding: 16px;
}

.tip {
  color: #999;
  font-size: 12px;
}

.bg {
  background: #f7f8fa;
}

.mg {
  margin-bottom: 8px;
}

.br {
  border-radius: 4px;
}

.submit-btn {
  position: absolute;
  bottom: 60px;
  left: 24px;
  right: 24px;
}

// less / sass / tailwind.css

// vue >>> weex
// react >>> react native (RN)
// flutter >>> dart
// hybrid
</style>
